<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq  +  each  +  es6</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		
		$(function(){
			function jsonLoad(){
				let cat = 'ken'
				let dog = 'lili'
				let zoo = {cat:cat,dog:dog}
				return zoo;
			}
			function domUp(){
				let zoo = jsonLoad()  // {cat:'ken',dog:'lili'}
				$('#result').append(
					`<div class="zoo">
						<span>这里是ZOO</span>有动物
						<p class="animal">
							${zoo.cat}
						</p>
						<p class="animal">
							${zoo.dog}
						</p>
						他们是好朋友
					</div>`
				);
			}
			domUp();
			//each  +   事件    
			$('.animal').each(function(index){
				$(this).on('click',function(){
					console.log($(this).index())
					$(this).css(
					{
						'background':`rgb(${rnd(0,256)},${rnd(0,256)},${rnd(0,256)})`,
						'color':`rgb(${rnd(0,256)},${rnd(0,256)},${rnd(0,256)})`
					})
				})
			})
			//随机函数
			function rnd(n,m){
				return n+parseInt(Math.random()*(m-n));
			}
		})
	</script>
</head>
<body>
	<div id="result">
	</div>
</body>
</html>